<!--主页-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MISS后台管理系统</title>
    <link rel="stylesheet" href="/hotel/css/layui.css">
    <link rel="stylesheet" href="/hotel/css/modules/laydate/default/laydate.css">
    <link rel="stylesheet" href="/hotel/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="/hotel/css/modules/code.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .room{
            width: 100px;
            height: 100px;
            /* background-color: #2e6da4; */
            line-height: 100px;
            text-align: center;
            display: inline-block;
            border: 1px solid white;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MISS后台管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    username
                </a>
            </li>
            <li class="layui-nav-item"><a href="">注销</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item">
                    <a href="index.html">首页</a>
                </li>
                <li class="layui-nav-item">
                <a href="javascript:;">散客开单</a>
                <dl class="layui-nav-child">
                    <dd><a href="Guests_check_in.html">宾客入住</a></dd>
                </dl>
            </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">订单</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Order.html">所有订单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">宾客结账</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Ordinary_invoicing.html">结账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">预定管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Query_book.html">查询预定</a></dd>
                        <dd><a href="Add_a_reservation.html">添加预定</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">营业查询</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Check-in_guest_enquiry.html">入住宾客查询</a></dd>
                        <dd><a href="Member_of_the_query.html">会员查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">系统设置</a>
                    <dl class="layui-nav-child">
                        <dd><a href="Data_management.html">数据管理</a></dd>
                        <dd><a href="VIP_set_up.html">VIP设置</a></dd>
                        <dd><a href="Billing_Settings.html">计费设置</a></dd>
                        <dd><a href="Set_up_the_room.html">房间设置</a></dd>
                        <dd><a href="Operator_setup.html">操作员设置</a></dd>
                    </dl>
                </li>
                 <li class="layui-nav-item">
                    <a href="javascript:;">订单信息</a>
                    <dl class="layui-nav-child">
                    <dd><a href="javascript:void(0);" onclick="tan()">查看订单信息</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
      <div style="padding: 15px;" id="roomId">
        	<div id=headerBtn>
            <button type="button" class="layui-btn layui-btn-primary"></button>
            </div>
            <div id=centerDiv>
            <div class="room" onclick="openResult()">8001</div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © MISS酒店
    </div>
</div>
 <div class="modal fade" id="webSocketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" style="height: 300px">
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">订单信息</h4>
      </div>
      <div class="modal-body" style="height: 300px">
        <div class="form-group" style="float: left;"></br>
			 <textarea id="message_content" class="form-control" readonly="readonly" cols="80" rows="10"></textarea>
		</div>
       </div>
    </div>
  </div>
</div><!-- /.modal -->
<script src="/hotel/js/layui.all.js"></script>
<script src="/hotel/js/jquery.min.js"></script>
<script src="../bt/modal.js"></script>
<script>
function tan(){
	$("#webSocketModal").modal('show')
}
    function findAll() {
        $.ajax({
            url:"/roomtype",
            type:"get",
            async:true,
            success:function (mes) {
                var str="<input onclick='findAll()' type='button' class='layui-btn layui-btn-primary' value='所有房间'></input>";
				for(var i=0;i<mes.length;i++){
					str+="<button onclick='findById("+mes[i].id+")' type='button' class='layui-btn layui-btn-primary'>"+mes[i].name+"</button>";
				}
				str+="<br/><br/>";
				$("#headerBtn").html(str);
				var str1="";
				for(var a=0;a<mes.length;a++){
					for(var j=0;j<mes[a].list.length;j++){
						
						if(mes[a].list[j].status=="可入住"){
							str1+="<div class='room' onclick='openResult("+mes[a].list[j].id+")' style='background-color: green'>"+mes[a].list[j].roomNumber+"&nbsp;"+mes[a].list[j].status+"</div>"
				    	}else if(mes[a].list[j].status=="正在使用"){
				    		str1+="<div class='room' style='background-color: red'>"+mes[a].list[j].roomNumber+"&nbsp;"+mes[a].list[j].status+"</div>"
				    	}else if(mes[a].list[j].status=="正在打扫"){
				    		str1+="<div class='room' style='background-color: yellow'>"+mes[a].list[j].roomNumber+"&nbsp;"+mes[a].list[j].status+"</div>"
				    	}
					}
				}
				$("#centerDiv").html(str1);
            }
        });
    }
    
			function findById(btnValue){
		    	$.ajax({
		    		url:"/roomtype/"+btnValue+"",
		            type:"get",
		            async:true,
		            success:function(mes1) {
		            	var str2="";
							for(var k=0;k<mes1.list.length;k++){
								
								if(mes1.list[k].status=="可入住"){
									str2+="<div class='room' onclick='openResult("+mes1.list[k].id+")' style='background-green: yellow'>"+mes1.list[k].roomNumber+"&nbsp;"+mes1.list[k].status+"</div>"
						    	}else if(mes1.list[k].status=="正在使用"){
						    		str2+="<div class='room' style='background-color: red'>"+mes1.list[k].roomNumber+"&nbsp;"+mes1.list[k].status+"</div>"
						    	}else if(mes1.list[k].status=="正在打扫"){
						    		str2+="<div class='room' style='background-color: yellow'>"+mes1.list[k].roomNumber+"&nbsp;"+mes1.list[k].status+"</div>"
						    	}
							}
		            	$("#centerDiv").html(str2);
		            }
		    	});
		    }
    function openResult(rid){
    	var url1 = location.search;
    	var oid;
    	var value1="已入住";
		var value2="已交押金";
		var value3="正在使用";
		var value4=200;
    	if(url1.indexOf("?") != -1){
			m1 = url1.substr(1);
			m2 = m1.split("=");
			oid = m2[1];
		}
    	var record = {
			"id":oid,
			"status":value1,
			"depositStatus":value2,
			"deposit":value4
		}
    	var record1 = {
   			"id":rid,
           	"status":value3
    	}
    	var record2 = {
    		"orderId":{
    			"id":oid
    		},
    		"roomId":{
    			"id":rid
    		}
    	}
    	var count = JSON.stringify(record);
		var count1 = JSON.stringify(record1);
		var count2 = JSON.stringify(record2);
        var r = confirm("亲，您确定开房吗？")
        if (r == true) {
        	$.ajax({
    			url:"/order/attr",
    	        type:"put",
    	        async:true,
    	        data:count,
    	        contentType:"application/json;charset=utf-8",
    	        dataType:"json",
    	        success:function(mes1){
    	        	if(mes1==1){
    	    	        $.ajax({
    	    	        	url:"/room",
    	    		        type:"put",
    	    		        async:true,
    	    		        data:count1,
    	    		        contentType:"application/json;charset=utf-8",
    	    		        dataType:"json",
    	    		        success:function(mes2){
    	    		        	if(mes2==true){
    	    		        		$.ajax({
    	    		        			url:"/order/attr/child",
    	    		        	        type:"put",
    	    		        	        async:true,
    	    		        	        data:count2,
    	    		        	        contentType:"application/json;charset=utf-8",
    	    		        	        dataType:"json",
    	    		        	        success:function(mes3){
    	    		        	        	if(mes3==1){
    	    		        	        		alert("开房成功");
        	    	    		        		location.reload();
    	    		        	        	}else{
    	    		        	        		alert("开房失败，请联系管理员");
    	    		        	        	}
    	    		        	        }
    	    		        		});
    	    		        		
    	    		        	}else{
    	    		        		alert("开房失败，请联系管理员");
    	    		        	}
    	    		        }
    	    	        });
    	        	}else{
    	        		alert("开房失败，请联系管理员");
    	        	}
    	        }
    		});
        }
    }
    findAll();
</script>
<script type="text/javascript">

var websocket = null;
//浏览器是否支持
if ('WebSocket' in window) {
  // 上面我们给webSocket定位的路径
  websocket = new WebSocket('ws://192.168.3.103:8080/webSocket');
} else {
  alert('该浏览器不支持websocket!');
}
//建立连接
websocket.onopen = function (event) {
  console.log('建立连接');
				
}
//关闭连接
websocket.onclose = function (event) {
  console.log('连接关闭');
}
//消息来的时候的事件
websocket.onmessage = function (event) {
  // 这里event.data就是我们从后台推送过来的消息
  console.log('收到消息:' + event.data);
  $('#message_content').append(event.data+'\n');
  // 在这里我们可以在页面中放置一个音乐，例如“您有新的订单了！”这样的提示音
  	document.getElementById("myAudio").play();
}

//发生错误时
websocket.onerror = function () {
  alert('websocket通信发生错误！');
}
//窗口关闭时，Websocket关闭
window.onbeforeunload = function () {
  websocket.close();
}

</script>
<audio src="../video/dingdong.mp3"  id="myAudio" ></audio>
</body>
</html>